<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>位置查询</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.16/"></script>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="jquery-2.0.3.min.js"></script>
    <script src="js/4.16/esri/css/main.css"></script>
    <script src="js/4.16/init.js"></script>

    <style>
        table,
        th,
        td {
            border: 1px solid #f50a0a;
            border-collapse: collapse;
        }
        
        td {
            padding: 5px;
        }
        
        thead {
            background: #d208ec;
            color: #fff;
        }
        
        thead td {
            padding: 10px 50px;
        }
        
        tbody td:hover {
            background-color: #3bb4f2;
            color: #fff;
        }
    </style>

    <script>
        var map;
        var projectlist = [];
        var obj;

        require([
            "esri/Basemap",
            "esri/Map",
            "esri/Graphic",
            "esri/core/urlUtils",

            "esri/views/MapView",
            "esri/views/layers/LayerView",

            "esri/layers/TileLayer",
            "esri/layers/MapImageLayer",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",

            "esri/tasks/QueryTask",
            "esri/tasks/support/Query",

            "esri/geometry/Extent",

            "dojo/dom",
            "dojo/on",
            "dojo/domReady!"
        ], function(
            Basemap,
            Map,
            Graphic,
            urlUtils,

            MapView,
            LayerView,

            TileLayer,
            MapImageLayer,
            FeatureLayer,
            GraphicsLayer,
            QueryTask,
            Query,
            Extent,
            dom,
            on
        ) {
            //创建地图-底图
            var basemap = new Basemap({
                baseLayers: [
                    new MapImageLayer({
                        url: "http://www.fqghj.net:8022/arcgis/rest/services/CXGHBZ/YDGHPH/MapServer"
                    })
                ],
                title: "basemap",
                id: "basemap"
            });

            var czlayer = new MapImageLayer({
                url: "http://www.fqghj.net:8022/arcgis/rest/services/DG/CZKFBJ0614/MapServer"
            });

            map = new Map({
                basemap: basemap,
                layers: [czlayer]
            });

            var view = new MapView({
                container: "mapview",
                map: map,
                zoom: 3,
                //Extent: startExtent,
            });
            //移除右下角logo
            view.ui._removeComponents(["attribution"]);
            //移除缩放小部件
            view.ui.remove("zoom");


            loadProjectList();
            //加载table项目列表
            function loadProjectList() {
                projectlist = [];
                // var q = "http://www.fqghj.net:8887/arcgis/rest/services/YDHX/ZSHXK/MapServer/0";
                var a = "http://www.fqghj.net:8887/arcgis/rest/services/YDHX/HXTEMP/MapServer/0"
                var queryTask = new QueryTask({
                    url: a
                });
                var query = new Query();
                query.where = "1=1";
                // and PRJNAME like '%'";
                //返回所有字段
                query.outFields = ["*"];
                //返回几何信息。
                query.returnGeometry = true;
                queryTask.execute(query).then(function(evt) {
                    if (evt != null) {
                        if (evt.features.length > 0) {
                            for (var i = 0; i < evt.features.length; i++) {
                                projectlist.push(evt.features[i]);
                                var tr = $("<tr prjid=\"" + evt.features[i].attributes["PRJID"] + "\">");
                                var td_name = $("<td>");
                                td_name.append(evt.features[i].attributes["PRJNAME"]);
                                tr.append(td_name);
                                //tr.attr("prjid", evt.features[i].attributes["PRJID"]);
                                $("#tb_project").append(tr);
                                // $(tr).on("click", function() {
                                //     selectTr(this);
                                // });
                                //$("#tb_project").on("click", function() {

                                $(document).on("click", "#tb_project tr", function() {
                                    selectTr(this);
                                });
                            }
                        }
                    }
                })
            }

            //定位选中项目地块
            function selectTr(obj) {
                var prjLayer = new GraphicsLayer();
                var prjid = $(obj).attr("prjid");
                if (projectlist.length > 0) {
                    for (var i = 0; i < projectlist.length; i++) {
                        if (projectlist[i].attributes["PRJID"] == prjid) {
                            var graphic = new Graphic({
                                geometry: projectlist[i].geometry,
                                symbol: {
                                    type: "simple-fill",
                                    color: [255, 255, 255],
                                    style: "solid",
                                    outline: {
                                        color: [255, 0, 0],
                                        width: 2
                                    }
                                }
                            });
                            prjLayer.graphics.add(graphic);
                            map.add(prjLayer);
                            var sExtent = new Extent({
                                xmin: projectlist[i].geometry.extent.xmin - 500,
                                ymin: projectlist[i].geometry.extent.ymin - 500,
                                xmax: projectlist[i].geometry.extent.xmax + 500,
                                ymax: projectlist[i].geometry.extent.ymax + 500,
                                spatialReference: {
                                    wkid: config.mapconfig.mapwkid
                                }
                            });
                            view.extent = sExtent;
                        }
                    }
                }
            }
        });
    </script>

    <style>
        .maindiv {
            position: relative;
            left: 40px;
            right: 50px;
            top: 10px;
        }
    </style>


</head>

<body>
    <!--地图-->
    <div class="maindiv" id="mapview" style="height: 700px; margin-top: 20px;"></div>

    <div style="position: absolute;top: 0px;right: 10px;background: rgb(248, 163, 4);border: 1px solid #fd03d4;">
        <table>
            <thead>
                <tr>
                    <td colspan="2">突破管控项目列表</td>
                </tr>
                <tr>
                    <td style="font-weight:bold;">项目名称</td>
                </tr>
            </thead>
            <tbody id="tb_project" style="height:500px;overflow-y:auto;display:block;">
                <!-- <tr>
                    <td></td>
                    <td>项目一</td>
                    <td>占用</td>
                </tr>

                <tr>
                    <td>项目二</td>
                    <td>占用</td>
                </tr> -->
            </tbody>
        </table>
    </div>

</body>

</html>